<template>
  <div class="ChatDashboard">
    <ChatNavBar />
    <b-container fluid class="ld-over" v-bind:class="{ running: loading }">
      <div class="ld ld-ring ld-spin"></div>
      <b-row>
        <b-col cols="2">
          <RoomList />
        </b-col>

        <b-col cols="8">
          <b-row>
            <b-col id="chat-content">
              <MessageList />
            </b-col>
          </b-row>
          <b-row>
            <b-col>
              <MessageForm />
            </b-col>
          </b-row>
        </b-col>

        <b-col cols="2">
          <UserList />
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
// 基本的导航栏
import ChatNavBar from "@/components/ChatNavBar.vue";
// 已登录用户有权访问的房间，也是房间选择器
import RoomList from "@/components/RoomList.vue";
// 显示在选定房间中发布的消息
import MessageList from "@/components/MessageList.vue";
// 用于将消息发送到所选房间的表单
import MessageForm from "@/components/MessageForm.vue";
// 列出了所选房间的成员
import UserList from "@/components/UserList.vue";
import { mapState } from "vuex";

export default {
  name: "ChatDashboard",
  components: { ChatNavBar, RoomList, UserList, MessageList, MessageForm },
  data() {
    return {};
  },
  computed: {
    ...mapState(["loading"])
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style>

</style>
